const path = require('path');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const TerserPlugin = require("terser-webpack-plugin");

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

//指定浏览器打开
const { WebpackOpenBrowser } = require('webpack-open-browser');

var getHtmlConfig = function(name){
  return {
    template : './src/view/'+name+'.html',
    filename : 'view/'+name+'.html',
    inject   : true,
    hash     : true,
    chunks   : ['common', name],
    minify   : {
    collapseWhitespace : false
    }
  }
}

 var config = {
    entry: {
        'common'          : ['./src/page/common/index.js'],
        'index'           : ['./src/page/index/index.js'],
        'user-login'      : ['./src/page/user-login/index.js'],
        'user-register'   : ['./src/page/user-register/index.js'],
        'user-information': ['./src/page/user-information/index.js'],
        'cart'            : ['./src/page/cart/index.js'],
        'catalog-main'    : ['./src/page/catalog-main/index.js'],
        'order-list'      : ['./src/page/order-list/index.js'],
        'order-view'      : ['./src/page/order-view/index.js'],
        'order-new'       : ['./src/page/order-new/index.js'],
        'order-final'     : ['./src/page/order-final/index.js'],
        'catalog-list'    : ['./src/page/catalog-list/index.js'],
        'catalog-detail'  : ['./src/page/catalog-detail/index.js'],
        'catalog-search'  : ['./src/page/catalog-search/index.js'],
        'cart'            : ['./src/page/cart/index.js']
    },
    output: {
      filename: 'js/[name].js',
      path: path.resolve(__dirname, 'dist')
    },
    //webpack警告解除（WARNING in configuration The 'mode' option has not been set）
    mode: 'development',
    // devServer : {
    //   port :8888,
    //   contentBase : path.resolve(__dirname,'dist')
    // },
    
    devServer : {
      port :8888,
      static:{
        directory: path.resolve(__dirname,'dist')
      },
      compress:true
      //新版本的webpack配置文件格式调整了，不支持contentBase
      // contentBase : path.resolve(__dirname,'dist')
    },
    module : {
      rules : [
        {
          test : /\.css$/, 
          use : [
            {
              loader : MiniCssExtractPlugin.loader,
              options : {
                publicPath : '../'
              }
            },
            {
              loader:'css-loader',
              options:{
                esModule:false,
                importLoaders:1
              }
            }
          ]
        },
        {
          test : /\.(png|svg|jpg|gif)$/,
          use : [{
            loader: 'url-loader',
            options:{
              limit:10,
              name:"images/[name].[ext]",
              esModule:false
            }
          }],
          type: 'javascript/auto'
        },
        {
          test : /\.(htm|string)$/,
          use  :{
            loader : 'html-loader',
            options : {
              esModule : false,
              minimize : false
            }
          }
        }
      ]
    },
    
    resolve: {
      extensions: ['.ts', '...'],
    },
  

    plugins: [
        //new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
          filename : 'css/[name].css'
        }),
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('user-login')),
        new HtmlWebpackPlugin(getHtmlConfig('user-register')),
        new HtmlWebpackPlugin(getHtmlConfig('user-information')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
        new HtmlWebpackPlugin(getHtmlConfig('order-list')),
        new HtmlWebpackPlugin(getHtmlConfig('order-view')),
        new HtmlWebpackPlugin(getHtmlConfig('order-new')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-list')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-detail')),
        new HtmlWebpackPlugin(getHtmlConfig('catalog-search')),
        new HtmlWebpackPlugin(getHtmlConfig('cart')),
        new webpack.HotModuleReplacementPlugin(),
        //用chrome打开，关闭默认浏览器(修改了"start": "webpack-dev-server")
        new WebpackOpenBrowser(
          { url: 'http://localhost:8888/view', browser: 'chrome' })
      ],
    optimization: {
        minimize: false,
        minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
          }),
        ],
        splitChunks : {
          cacheGroups : {
            commons : {
              name      : 'util',
              chunks    : 'all',
              minChunks : 2,
              minSize   : 0
            },
          }
        }
    },
    externals: {
        'jquery' : 'window.jQuery'
    },
    resolve : {
      alias : {
        util         : __dirname + '/src/util',
        page         : __dirname + '/src/page',
        images       : __dirname + '/src/images',
        service      : __dirname + '/src/service',
        node_modules : __dirname + '/node_modules'
      }
    }
  };

  module.exports = config;